<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router</title>
    <!--1.引入相关的库文件-->
    <script src="../lib/vue_2.5.22.js"></script>
    <script src="../lib/vue-router_3.0.2.js"></script>
</head>
<body>
<!--
  1.引入相关的库文件
  2.添加路由链接
  3.添加路由填充位
  4.定义路由组件
  5.配置路由规则并创建路由实例
  6.把路由挂载到vue根实例中
-->


<!-- 被vm实例所控制的区域-->
<div id="app">
    <!-- 2.添加路由链接-->
    <!-- router-link是vue中提供的标签, 默认会被渲染为a标签 -->
    <!-- to属性默认会被渲染为href属性 -->
    <!-- to属性的值默认会被渲染为 # 开头的hash地址-->
    <router-link to="/user/1">User1</router-link>
    <router-link to="/user/2">User2</router-link>
    <router-link to="/user/3">User3</router-link>
    <!-- -->
    <router-link :to="{name: 'user', params: {id: 444}}">User4</router-link>
    <router-link to="/register">Register</router-link>
    <router-link :to="{name: 'playing'}">Game</router-link>
    <router-link :to="{name: 'playing'}">Game</router-link>


    <!-- 3.添加路由填充位-->
    <!-- 路由填充位 (也叫做路由占位符)-->
    <!-- 将来通过路由规则匹配到的组件, 将会被渲染到router-view所在的位置-->
    <router-view></router-view>
</div>

<script>

    const Game = {
        template: `<div>
        <h2>Playing Game!!!</h2>
        <h2>Playing Game!!!</h2>
        <h2>Playing Game!!!</h2>
</div>`
    }

    /**
     * 4.定义路由组件
     * 定义了两个对象User和Register, 都有一个属性值为template
     *
     * @type {{template: string}}
     */
    const User = {
        /**
         * 路由组件中通过 $route.params获取路由参数
         */
        props: ['id', 'uname', 'age'],
        template: `<div>
            <h1>User组件 -- 用户的Id为: {{id}} -- 姓名: {{uname}} -- age:{{age}}</h1>
            <button @click="goRegister">跳转到注册页面</button>

        </div>`,

        /**
         * 页面导航的两种方式
         * #
         * 声明式导航: 通过点击链接实现导航的方式, 叫做声明式导航
         * . 例如: 普通页面中的 <a></a>链接或vue中的<router-link></router-link>
         * #
         * 编程式导航: 通过调用JavaScript形式的API实现导航的方式, 叫做导航式导航
         * . 例如: 普通页面中的location.href
         * *
         * vue-router编程式导航
         * 常用的编程式导航API如下:
         * this.$router.push('hash地址')
         * this.$router.go(n)
         */
        methods: {
            goRegister() {
                /**
                 * router.push()方法的参数规则
                 * // 字符串(路径名称)
                 * router.push('/home')
                 * // 对象
                 * router.push({ path: '/home'})
                 * // 命令的路由(传递参数)
                 * router.push({name: '/user', params: {userId: 123 }})
                 * // 带查询参数, 变成 /register?uname=lisi
                 * router.push({path: '/register', query: {uname: 'lisi'}})
                 */
                this.$router.push('/register')
            }
        }
    }

    const Register = {
        template: `<div><h1>Register组件</h1>
            <button @click="goBack">后退</button>
        </div>`,
        methods: {
            goBack() {
                this.$router.go(-1);
            }
        }
    }


    const vueRouter = new VueRouter({
        // routes是路由规则数组
        routes: [
            // 每个路由规则都是一个配置对象, 其中至少包含path和component两个属性
            // path表示当前路由规则匹配的hash地址
            // component表示当前路由规则对应要展示的组件
            // 其中, path表示需要被重定向的原地址, redirect表示将要被重定向的新地址
            // 当访问 / 路径的时候, 默认会跳换到 /user路径下
            {path: '/', redirect: '/user'},
            /**
             * 动态路由实现, 动态路由参数, 以冒号开头
             * #
             * 路由组件传递参数:
             * 3.props的值为函数类型
             * 如果props是一个函数, 则这个函数接受route对象为自己的形参
             */
            {
                /**
                 * 命令路由
                 * 为了更加方便的表示路由的路径, 可以给路由规则起一个别名, 即为"命名路由"
                 */
                name: 'user',
                path: '/user/:id',
                component: User,
                props: route => ({name: 'zs', age: '20', id: route.params.id})

            },
            {path: '/register', component: Register},
            {path: '/play/game', name: "playing", component: Game}
        ]
    });


    /**
     * 6.创建vm实例对象, 并路由挂载到vue跟实例中
     */
    new Vue({
        // 指定控制的区域
        el: "#app",
        data: {},
        // 挂载路由实例对象
        // 当属性名和 值一样时, 可以简写
        // router : router
        // router
        router: vueRouter
    })

</script>


</body>
</html>